<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            html,body{
                width: 100%;
                height: 100%;
            }
            .head{
                width: 100%;
                height: 10%;
                /* background-color: red; */
            }
            .search{
                width: 70%;
                height: 40%;
                float: left;
                background-color: #ccc;
                border-radius: 5px;
                margin-top: 30px;
                margin-left: 15px;
                margin-left: 35px;
            }
            .search input{
                width: 90%;
                height: 100%;
                border: none;
                border-radius: 5px;
                background-color: #ccc;
            }
            .massage{
                width: 10%;
                height: 50%;
                float: right;
                background-color: white;
                border-radius: 5px;
                margin-top: 30px;
                margin-right: 15px;
            }
            .background{
                width: 100%;
                height: 26%;
                /* background-color: green; */
                position: relative;
            }
            .banner{
                width: 90%;
                height: 90%;
                background-color: #ccc;
                border-radius: 10px;
                position: absolute;
                top: 5%;
                left: 5%;
            }
            .list{
                width: 100%;
                height: 30%;
                /* background-color: blue; */
                display: flex;
                flex-wrap: wrap;
                justify-content: space-evenly;
            }
            .list-box{
                width: 18%;
                height: 50%;
                /* background-color: #ccc;  */
                position: relative;
            }
            .list span{
                width: 100%;
                height: 10%;;
                font-size: 10px;
                position: absolute;
                top: 70%;
                text-align: center;
            }
            .recommend{
                width: 100%;
                height: 7%;
                /* background-color: yellow; */
                display: flex;
                justify-content: center;
                position: relative;
            }
            .a1{
                font-size: 22px;
                line-height: 200%;
            }
            .a2{
                line-height: 10px;
                margin-top: 13px;
            }
            .a2-1{
                font-size: 11px;
            }
            .fotter{
                width: 100%;
                height: 7%;
                /* background: red; */
                display: flex;
                justify-content: space-around;
                position: fixed;
                top: 93%;
            }
            .fotter-box{
                width: 20%;
                height: 100%;
                float: left;
                /* background: #ddd; */
                position: relative;
    
            }
            .fotter-box span{
                width: 100%;
                height: 50%;
                position: absolute;
                top: 50%;
                text-align: center;
                font-size: 13px;
                
            }
        </style>
    </head>
<body>
    <div class="head">
        <div class="search">
            <div class="icon"></div>
            <input type="text" placeholder="搜索">
        </div>
        <div class="massage">消息</div>
    </div>
    <div class="background">
        <div class="banner">

        </div>
    </div>
    <div class="list">
        <div class="list-box">
            <span>洗衣机</span>
        </div>
        <div class="list-box">
            <span>洗衣机</span>
        </div>
        <div class="list-box">
            <span>洗衣机</span>
        </div>
        <div class="list-box">
            <span>洗衣机</span>
        </div>
        <div class="list-box">
            <span>洗衣机</span>
        </div>
        <div class="list-box">
            <span>洗衣机</span>
        </div>
        <div class="list-box">
            <span>洗衣机</span>
        </div>
        <div class="list-box">
            <span>洗衣机</span>
        </div>
        <div class="list-box">
            <span>洗衣机</span>
        </div>
        <div class="list-box">
            <span>洗衣机</span>
        </div>
    </div>
    <div class="recommend">
        <div class="a1">为你推荐</div>
        <div class="a2">
            <div class="a2-1">
                For you
            </div>
            <div class="a2-1">
                recommend
            </div>
        </div>
    </div>
    <div class="fotter">
        <div class="fotter-box">
            <span>首页</span>
            
        </div>
        <div class="fotter-box">
            <span>分类</span>
        </div>

        <div class="fotter-box">
            <span>购物车</span>

        </div>
        <div class="fotter-box">
            <span>我的</span>

        </div>
    </div>


</body>
</html>